<template>
    <div class="thingsDetail">

         <div class="pageTitle" > 
            <span @click="goBack" class="goBack">{{'<'}}</span>
            <div class="title">周末计划表</div> 
        </div>

        <ul class="tableList">
            <li 
                v-for="(item,index) in list" :key="index" 
                @click="goToDetail"
            >
                <div>
                    <div class="title">{{item.title}}</div>
                    <ul class="tasks" v-if="item.children">
                        <li v-for="(item1,index1) in item.children" :key="index1" class="singleTask">
                            <span>
                                {{item1}}
                            </span>
                            <span class="task-icon"></span>
                        </li>
                    </ul>
                    <div class="add-btn" v-if="item.title != '+ 添加'"> + 添加</div>
                </div>
            </li>
        </ul>
    </div>
    
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'

const list = reactive([
    {
        title:'娱乐',
        children:[
                '娱乐',
                '娱乐',
                '娱乐',
        ]   
    },
    {
        title:'学习',
        children:[
                '娱乐',
            '娱乐',
        ]   
    },
    {
        title:'+ 添加',
    },
    
    
])

    
const goBack=()=>{
    history.back()
}


</script>

<style lang="less" scoped>

    .thingsDetail{
        box-sizing: border-box;
        width: 100%;
        min-height: calc(100vh);

        background-color: #cce1e2;
        padding:0 20px;

        display: flex;
        flex-direction: column;


        .pageTitle{
            position: relative;
            font-size: 30px;
            padding-top: 20px;
            .goBack{
                position: absolute;
                left: 0;
                text-align: left;
                font-weight: bolder;
            }

            .title{
               color:black;
                font-size: 35px;
                letter-spacing: 10px;
            }

        }


        > .title{
            color:black;
            font-size: 35px;
            letter-spacing: 10px;
            padding-top: 20px;

        }

        .tableList{
            flex-grow: 1;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 20px;
            overflow-x: auto;



            li{
                box-sizing: border-box;
                flex: 1 0 200px;
                .title{
                    background: #90cecd;
                    font-size: 22px;

                }

                .tasks{
                    padding: 15px;
                    font-size: 18px;
                    background-color: #b2dada;

                    border-bottom: #badbdb 8px solid;

                    .singleTask{
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        padding:5px 0;
                    }

                    .task-icon{
                        width:18px;
                        height: 18px;
                        border-radius: 9px;
                        background-color: #65c7ba;
                    }
                }

                .add-btn{
                    background-color: #e4eeef;
                    margin-top: 10px;
                }

               
            }
        }


        
    }

</style>
